<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
    minimum-scale=1.0, user-scalable=no">
    <title>V布</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/indexfb.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <script src="./js/swiper-b undle.min.js"></script>
    <script src="./js/fastclick.js"></script>
    <script src="./js/indexfb.js"></script>

</head>

<body>
    <!--  search 搜索 -->
    <div class="search-wrap">
        <div class="search-btn"></div>
        <div class="search">
            <div class="search-icon"></div>
            <div class="search-conter">
                <p>芋你啵啵</p>
            </div>
        </div>
        <div class="search-message"></div>
    </div>
    <!-- top-content  主体内容部分 -->
    <div class="top-content ">
        <!-- slider -->
        <div class="slider">
            <!-- <ul class="slider-focus">
                <li><img src="./upload/slider3.jpeg" alt=""></li>
                <li><img src="./upload/slider4.jpeg" alt=""></li>
                <li><img src="./upload/slider2.jpeg" alt=""></li>
                <li><img src="./upload/slider3.jpeg" alt=""></li>
                <li><img src="./upload/slider4.jpeg" alt=""></li>
            </ul>
            <ul class="slider-circle">
                <li class="current"></li>
                <li></li>
                <li></li>
            </ul> -->
            <!-- Swiper -->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="./upload/slider2.jpeg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="./upload/slider3.jpeg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="./upload/slider4.jpeg" alt="">
                    </div>

                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
                <!-- Add Arrows -->
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        </div>
        <!-- nav  -->
        <div class="nav">
            <a href=""><img src="./img/下午茶.png" alt="">
                <span>下午茶</span>
            </a>
            <a href=""><img src="./img/面包.png" alt="">
                <span>面包</span>
            </a>
            <a href=""><img src="./img/蛋糕.png" alt="">
                <span>蛋糕</span>
            </a>
            <a href=""><img src="./img/navquan.webp" alt="">
                <span>领券</span>
            </a>
            <a href=""><img src="./img/会员.png" alt="">
                <span>会员</span>
            </a>
        </div>
        <!-- goBack 返回首页 -->
        <div class="goBack">

        </div>
        <!-- count  -->
        <div class="count">
            <div class="countfor">
                <span>综合</span>
                <img src="./img/bottom@2x.png" alt="">
                <div class="count-zh">
                    <a href="">综合</a>
                    <a href="">信用</a>
                    <a href="">价格降序</a>
                    <a href="">价格升序</a>

                </div>
            </div>
            <div class="countfor count-xl">
                <span>销量</span>
                <img src="./img/bottom@2x.png" alt="">
            </div>
            <div class="countfor count-jg">
                <span>价格</span>
                <img src="./img/bottom@2x.png" alt="">
            </div>
            <div class="countfor count-sx">
                <span>筛选</span>
                <img src="./img/筛选@2x.png" alt="">
            </div>

        </div>
        <!-- product -->

        <ul class="product">
            <li class="product-item">
                <img src="./upload/玫瑰星河.jpeg" alt="">
                <p>玫瑰星河</p>
                <span> ￥ 169 </span><em>￥299</em>
                <div class="shopcar"></div>
            </li>
            <li class="product-item">
                <img src="./upload/数字蛋糕.jpeg" alt="">
                <p>数字蛋糕</p>
                <span> ￥ 169 </span><em>￥299</em>
                <div class="shopcar"></div>
            </li>
            <li class="product-item">
                <img src="./upload/玫瑰星河.jpeg" alt="">
                <p>玫瑰星河</p>
                <span> ￥ 169 </span><em>￥299</em>
                <div class="shopcar"></div>
            </li>
            <li class="product-item">
                <img src="./upload/数字蛋糕.jpeg" alt="">
                <p>数字蛋糕</p>
                <span> ￥ 169 </span><em>￥299</em>
                <div class="shopcar"></div>
            </li>
            <li class="product-item">
                <img src="./upload/玫瑰星河.jpeg" alt="">
                <p>玫瑰星河</p>
                <span> ￥ 169 </span><em>￥299</em>
                <div class="shopcar"></div>
            </li>
            <li class="product-item">
                <img src="./upload/数字蛋糕.jpeg" alt="">
                <p>数字蛋糕</p>
                <span> ￥ 169 </span><em>￥299</em>
                <div class="shopcar"></div>
            </li>
            <li class="product-item">
                <img src="./upload/玫瑰星河.jpeg" alt="">
                <p>玫瑰星河</p>
                <span> ￥ 169 </span><em>￥299</em>
                <div class="shopcar"></div>
            </li>
            <li class="product-item">
                <img src="./upload/数字蛋糕.jpeg" alt="">
                <p>数字蛋糕</p>
                <span> ￥ 169 </span><em>￥299</em>
                <div class="shopcar"></div>
            </li>


        </ul>


        <!-- fotter -->
        <div class="fotter">
            <a href="" class="fotter-list">
                <p>  </p>
                <span>首页</span>
            </a>
            <a href="" class="fotter-list">
                <p>  </p>
                <span>购物车</span>
            </a>
            <a href="" class="fotter-list">
                <p>  </p>
                <span>分类</span>
            </a>
            <a href="" class="fotter-list">
                <p>  </p>
                <span>我的</span>
            </a>
        </div>
    </div>
</body>

</html>